<template>
  <div>
    <el-autocomplete
      v-model="orderNo"
      v-loading="loading"
      class="inline-input"
      :fetch-suggestions="selectOrderList"
      :disabled="disabled"
      placeholder="请输入订单编号"
      style="width: 100%"
      clearable
      @select="handleSelectOrder"
    >
      <template slot-scope="{ item }">
<!--                <div>{{ item.customerName }}_{{ item.productName }}</div>-->
        {{ getOrderNo(item) }}
      </template>
      <el-button
        slot="append"
        icon="el-icon-search"
        :disabled="disabled"
        @click="openDialog"
      />
    </el-autocomplete>
    <div v-if="orderVisible">
      <sale-order-module ref="orderModule" :query="query" :visible="orderVisible" @close="closeDialog" />
    </div>
  </div>
</template>

<script>

import { order_list } from '@/api/sale/order'
import saleOrderModule from '@/modules/saleOrderModule.vue'

export default {
  name: 'SaleOrderQuery',
  components: { saleOrderModule },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    query: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      orderVisible: false,
      loading: false,
      orderNo: ''
    }
  },
  methods: {
    init(row) {
      this.orderNo = this.getOrderNo(row)
    },
    getOrderNo(row) {
      if (row && row !== {}) {
        return row.orderNo + '_' + row.customerName + '_' + row.productName
      } else {
        return ''
      }
    },
    resetQueryForm() {
      this.orderNo = ''
      this.id = undefined
    },
    // 打开订单弹窗
    openDialog() {
      this.orderVisible = true
      this.$nextTick(() => {
        this.$refs.orderModule.doPage()
      })
    },
    // 关闭订单弹窗
    closeDialog(row) {
      if (row) {
        // this.orderNo = row.customerName + '_' + row.productName
        this.orderNo = this.getOrderNo(row)
        this.$emit('choose', row)
      }
      this.orderVisible = false
    },
    // 订单选中
    handleSelectOrder(row) {
      if (row) {
        // this.orderNo = row.customerName + '_' + row.productName
        this.orderNo = this.getOrderNo(row)
        this.$emit('choose', row)
      }
    },
    selectOrderList(query, callback) {
      this.loading = true
      order_list({ orderNo: query }).then(resp => {
        if (resp.success) {
          callback(resp.data)
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style scoped>

</style>
